<template>
    <view class="main">
        <header-vue title="地址管理" :back="true" :backUrl="backUrl">
            <template #btnLt>
                <view class="add-address flex center" @click="addAddress">
                    <u-icon name="plus" size="12" color="#0785CF"></u-icon>
                    <text>新增地址</text>
                </view>
            </template>
        </header-vue>

        <view class="address-list" v-if="addresses && addresses.length">
            <view class="address-card" v-for="item in addresses" :key="item.id" @click="selectAddress(item)">
                <view class="row row-top">
                    <text class="name">收货人：{{ item.name }}</text>
                    <text class="phone">{{ item.telephone }}</text>
                </view>
                <view class="row row-addr">
                    <text class="addr">{{ item.province_name }} {{ item.city_name }} {{ item.district_name }} {{ item.address }}</text>
                </view>
                <view class="row row-bottom">
                    <view class="default-flag" @click.stop="setDefault(item.id)">
                        <u-icon name="checkmark-circle-fill" size="14" :color="item.isDefault === 1 ? '#0785CF' : '#B3B7BD'"></u-icon>
                        <text class="default-text" :class="{ active: item.isDefault === 1 }">默认地址</text>
                    </view> 
                    <view class="actions">
                        <view class="action" @click.stop="editAddress(item.id)">
                            <u-icon name="edit-pen" size="14" color="#666"></u-icon>
                            <text>编辑</text>
                        </view>
                        <view class="divider"></view>
                        <view class="action" @click.stop="deleteAddressEvent(item.id)">
                            <u-icon name="trash" size="14" color="#666"></u-icon>
                            <text>删除</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="empty-box" v-else>
            <u-empty text="暂无地址" mode="data"></u-empty>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { getAddressList, setdefaultAddress, deleteAddress } from '@/api/index.js'
export default {
    data() {
        return {
            selectAddressStatus: false,
            backUrl:''
        } 
    },
    components: {
        headerVue
    },
    computed: {
        ...mapGetters(['currentAddress', 'addressList','addressUrl']),
        addresses() {
            return this.addressList;
        }
    },
    onLoad(option) {
        this.selectAddressStatus = (option.isClick == 'true')
        this.initAddressList()
        this.backUrl = this.addressUrl || ''
    },
    methods: {
        ...mapMutations(['SET_SELECTED_ADDRESS']),
        ...mapActions(['getAddressList', 'setDefaultAddress', 'deleteAddress']),
        
        // 初始化地址列表
        async initAddressList() {
            await this.getAddressList()
        },
        
        addAddress() {
            uni.redirectTo({
                url: '/views/address/add-address?isClick='+this.selectAddressStatus
            })
        },
        
        async setDefault(id) {
            try {
                const res = await setdefaultAddress({
                    address_id: id
                })
                if (res.errno != 0) {
                    uni.showToast({title:'设置失败',icon:'none'})
                    return;
                }
                
                // 直接更新store，不需要重新加载接口
                await this.setDefaultAddress(id)
                
                // 显示成功提示
                uni.showToast({
                    title: '设置成功',
                    icon: 'success'
                })
                
            } catch (error) {
                uni.showToast({title:'设置失败',icon:'none'})
            }
        },
        
        editAddress(id) {
            uni.redirectTo({
                url: `/views/address/add-address?address_id=${id}&isClick=${this.selectAddressStatus}`
            })
        },
        
        // 删除交由后端接口；本地仅选择，不维护列表
        // 选择地址
        selectAddress(address) {
            if (!this.selectAddressStatus) return;
            // 将选中的地址存储到store中
            this.SET_SELECTED_ADDRESS(address)
            // 跳转回订单页面
            uni.navigateBack()
        },
        
        async deleteAddressEvent(id) {
            // 是否确认删除提示
            const confirmRes = await uni.showModal({
                title: '提示',
                content: '确定要删除该地址吗？',
                confirmText: '删除',
                cancelText: '取消'
            });
            if (!confirmRes.confirm) {
                return;
            }

            try {
                const res = await deleteAddress({
                    address_id: id
                })

                if (res.errno != 0) {
                    uni.showToast({title:'操作失败',icon:'none'})
                    return;
                }
                
                // 删除成功后，从store中移除该地址
                this.deleteAddress(id)
                
                uni.showToast({title:'删除成功',icon:'success'})
            } catch (error) {
                uni.showToast({title:'操作失败',icon:'none'})
            }
        }
    }
}
</script>
<style lang="scss" scoped>

.main {
    min-height: 100vh;
    background-color: #F5F5F5;

    .add-address {
        font-size: 28rpx;
        color: #0785CF; 
        margin-left: 4rpx;
    }

    .address-list {
        padding: 24rpx 24rpx 32rpx;
    }

    .empty-box {
        padding: 80rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24rpx;
    }

    .add-empty-btn {
        width: 60%;
        height: 80rpx;
        background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        font-weight: 600;
        color: #FFFFFF;
    }

    .address-card {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 24rpx 0;
        margin-bottom: 20rpx;
        box-shadow: 0rpx 0rpx 16rpx rgba(0,0,0,0.06);
    }

    .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .row-top {
        padding: 0 24rpx;
        margin-bottom: 20rpx;
    }

    .name {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
    }

    .phone {
        font-size: 26rpx;
        color: #B3B7BD;
    }

    .row-addr {
        padding: 0 24rpx;
        margin-bottom: 24rpx;
    }

    .addr {
        font-size: 24rpx;
        color: #999999;
    }

    .row-bottom {
        padding: 24rpx 24rpx 0;
        border-top: 1rpx solid #E6E6E6;
    }

    .default-flag {
        display: flex;
        align-items: center;
    }

    .checkbox {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border: 1rpx solid #CDD3DB;
        margin-right: 12rpx;
        position: relative;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
    }

    .default-text {
        font-size: 26rpx;
        color: #B3B7BD;
        margin-left: 8rpx;
    }
    .default-text.active {
        color: #0785CF;
    }

    .actions {
        display: flex;
        align-items: center;
        color: #666666;
    }
    .action {
        display: flex;
        align-items: center;
        gap: 6rpx;
        font-size: 26rpx;
        color: #666666;
    }
    .divider {
        width: 1rpx;
        height: 24rpx;
        background: #E6E6E6;
        margin: 0 20rpx;
    }
}

</style>